<template>
<el-dialog title="添加会员" :visible="showDialog" @close="btnCanl">

<!--  表单-->
<el-form   :model="formData"  :rules="formDataRules" ref="addForm" label-width="120px">

<el-form-item label="姓名" prop="username">
  <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名"></el-input>
</el-form-item>

  <el-form-item label="学号" prop="studentId">
    <el-input v-model="formData.studentId" style="width:50%" placeholder="请输入学号"></el-input>
  </el-form-item>

  <el-form-item label="手机号" prop="phonnnum">
    <el-input  v-model="formData.phonnnum" style="width:50%" placeholder="请输入手机号"></el-input>
  </el-form-item>

  <el-form-item label="年龄"  prop="age">
    <el-input  v-model="formData.age"  style="width:50%" placeholder="请输入年龄"></el-input>
  </el-form-item>

  <el-form-item label="性别"  prop="gender">
    <el-select v-model="formData.gender"         ref="clearOption" clearable style="width:50%" placeholder="请选择性别">

      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
</el-form-item>

  <el-form-item label="入会时间" prop="joinDate">
    <el-date-picker  v-model="formData.joinDate"   style="width:50%" placeholder="请输入入会时间"></el-date-picker>
  </el-form-item>

  <el-form-item label="院系" prop="depart">
<!--    <el-input   v-model="formData.depart"  style="width:50%" placeholder="请输入院系"></el-input>-->
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' }"
      @change="handleChange"
      ref="casaderClear"
     ></el-cascader>
  </el-form-item>




</el-form>

  <!-- footer插槽 -->
  <template v-slot:footer>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="btnCanl">取消</el-button>
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
      </el-col>
    </el-row>
  </template>

</el-dialog>
</template>



<script>
import  {getusers,addusers} from '@/api/user'
import options from "@/api/constant/options";


export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{

      formData: {  //绑定的数据
        username: '',
        phonnnum: '',
        studentId: '',
        depart: '',
        specialty: '',
        joinDate: '',
        age: '',
        gender:''
      },
      formDataRules:{  //校验规则
        username: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' },
          {min: 1, max: 4, message: '用户姓名为1-4位'}],

        phonnnum: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {
          pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
        }],
        studentId: [{ required: true, message: '学号不能为空', trigger: 'blur' }],
        depart: [{ required: true, message: '院系不能为空', trigger: 'blur' }],
        specialty: [{ required: true, message: '专业不能为空', trigger: 'blur' }],
        joinDate: [{ required: true, message: '加入时间不能为空', trigger: 'change' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],

      },

      value: [],//选择器选中的数据
      options:options ,//学院专业
      options2:[{
        value: '1',
        label: '男'
      },
        {
        value: '0',
        label: '女'
      }]

    }

  },
  created() {

    },
  methods:{

    btnCanl(){
      this.formData= {  //绑定的数据
        username: '',
          phonnnum: '',
          studentId: '',
          depart: '',
          specialty: '',
          joinDate: '',
          age: '',
          gender:''
      }
      this.$refs.addForm.resetFields() // 重置校验字段


      this.$emit('update:showDialog', false) // 关闭

    },
    handleChange(value){
      this.formData.depart=value[0]
      this.formData.specialty=value[1]
    },
   async btnOk(){


      try {
        await this.$refs.addForm.validate()
        // 调用新增接口
        await addusers(this.formData) // 新增员工
        // 告诉父组件更新数据
        // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
        // this.$emit
        this.$message.success('添加用户成功')
        this.$emit('addUsers')
        this.$emit('update:showDialog', false) // 关闭

      } catch (error) {
        console.log(error)
      }
    }

  }
}
</script>

<style scoped>

</style>
